<script setup lang="ts">
	import Driver from '@/components/driver/index.vue'
</script>

<template>
	<view class="header" >
		<image class="header-banner" src="/static/bg.png"></image>
				<uni-card  spacing="0" margin="15rpx" sub-title="副标题" thumbnail="/static/logo_ruiji.png" class="header-card">
					<view class="uni-body">
						<view class="uni-body-content">
							<text>瑞吉餐厅为顾客打造专业的大众化美食外送餐饮</text>
							<view class="address">
								<image src="/static/address.png"></image>
								北京市朝阳区新街大道一号楼8层</view>
						</view>
						<!-- <Driver dri_style="margin: 10px; height: 40px;"/> -->
						<view class="uni-body-icon">
							<image src="~@/static/girl.png"></image>
						</view>
					</view>
					<template #title>
						<view class="uni-header">
							<image src="/static/logo_ruiji.png"></image>
							<view>
								<text class="title">苍穹外卖</text>
								<view class="desc-list">
									<view class="desc-item">
										<image class="icon-desc" src="/static/length.png"></image>
										<text>距离1.5km</text>
									</view>
									<view class="desc-item">
										<image class="icon-desc" src="/static/length.png"></image>
										<text>配送费6元</text>
									</view>
									<view class="desc-item">
										<image class="icon-desc" src="/static/length.png"></image>
										<text>预计时长12min</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</uni-card>
	</view>
</template>

<style lang="less">
	.header{
		width: 100%;
		height: 400rpx;
		background-repeat: no-repeat;
		background-size: auto;
		position: relative;
		&-banner{
			width: 100%;
			position: absolute;
			top: 0;
			height: 100%;
		}
		&-card{
			position: absolute;
			// bottom: -100px;
			// top: 50%;
			top: 200rpx;
			width: 100%;
			overflow: hidden;
			z-index: 10;
			.uni-header{
				display: flex;
				align-items: center;
				gap: 20rpx;
				padding: 10px;
				border-bottom: 1px solid #eaedf1;
				image{
					width: 100rpx;
					height: 100rpx;
				}
				> view{
					flex: 1;
				}
				.title{
					font-size: 36rpx;
					font-family: PingFangSC, PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					color: #20232a;
					line-height: 50rpx;
				}
				.desc-list{
					display: flex;
					align-items: center;
					font-size: 12px;
					justify-content: space-between;
					margin-top: 3px;
					.desc-item{
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						white-space: nowrap;
						text{
							font-size: 24rpx;
							font-family: PingFangSC, PingFangSC-Regular;
							font-weight: 400;
							text-align: center;
							color: #333333;
							line-height: 36rpx;
							padding-right: 20rpx;
						}
						.icon-desc{
							width: 28rpx;
							height: 28rpx;
							margin-right: 4rpx;
						}
					}
				}
				
			}
		}
	}
	.uni-body{
		display: flex;
		justify-content: space-between;
		align-items: center;
		display: flex;
		font-size: 24rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		text-align: left;
		color: #9b9b9b;
		line-height: 34rpx;
		padding: 0 4rpx;
		
		&-content{
			display: flex;
			flex-direction: column;
			gap: 12rpx;
			flex: 1;
			overflow: hidden;
			.address{
				display: flex;
				align-items: center;
				gap: 8px;
				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
			text{
				width: 100%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		&-icon{
			padding: 10rpx 20rpx 10rpx 40rpx;
			margin-left: 12rpx;
			margin-top: 12rpx;
			border-left: 1px solid rgba(219, 219, 219, 0.45);
			image{
				width: 42rpx;
				height: 42rpx;
				display: inline-block;
			}
		}
	}
</style>